<template>
	<div class="carImg">
		<imgSectionTitle :title="contentList[0].channelName"></imgSectionTitle>

		<div class="imgContent">
			<div class="img_content_left">
				<div class="carImg_box_left_top">
					<a class="block_a" :href="Path + contentList[0]?.url" target="_blank">
						<div class="carImg_img_box_left_top img_box"><img class="carImg_img_left_top img_pic" :src="getImgPath(contentList[0]?.headImag)" /></div>
						<p class="carImg_img_left_top_p p_descripte">{{ contentList[0]?.title }}</p>
					</a>
				</div>
			</div>
			<div class="img_content_right">
				<div class="carImg_box_right_bottom">
					<div v-for="item in [contentList[1], contentList[2]]">
						<a class="block_a" :href="Path + item?.url" target="_blank">
							<div class="carImg_img_box_right_bottom img_box"><img class="carImg_img_right_bottom img_pic" :src="getImgPath(item?.headImag)" /></div>
							<p class="carImg_img_right_bottom_p p_descripte">{{ item?.title }}</p>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { defineAsyncComponent } from 'vue';
// import imgSectionTitle from './imgSectionTitle.vue'
export default {
	props: {
		contentList: {
			type: Array,
			default: []
		}
	},
	components: {
		imgSectionTitle: defineAsyncComponent(() => import(rootPath + '/src/components/imgChannel/imgSectionTitle.vue'))
	},
	data() {
		return {
			Path: getRootPath(),
		};
	},

	methods: {
		getImgPath(url){
			return imgPath(url);
		},
	}
};
</script>

<style>
.carImg {
	width: 1200px;
}
.carImg .imgContent {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.carImg .imgContent .img_content_left {
	width: 858px;
	height: 481px;
}
.carImg .imgContent .img_content_left .carImg_img_box_left_top {
	width: 858px;
	height: 481px;
}
.carImg .imgContent .img_content_left .carImg_img_left_top {
	width: 100%;
	transition: all 1.3;
}
.carImg .imgContent .img_content_left .carImg_img_left_top_p {
	font-size: 24px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #fff;
	line-height: 32px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	position: relative;
	z-index: 1;
	margin-top: -76px;
	padding: 22px 24px;
	background: linear-gradient(360deg, #111111 0%, rgba(17,17,17,0) 100%);
}
.carImg .imgContent .img_content_right {
	width: 339px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.carImg .imgContent .img_content_right .carImg_box_right_bottom {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 481px;
	overflow: hidden;
}
.carImg .imgContent .img_content_right .carImg_box_right_bottom .carImg_img_box_right_bottom {
	width: 339px;
	height: 191px;
	transition: all 1.3;
}
.carImg .carImg_img_left_top:hover{
	transform: scale(1.1);
}
.carImg  .carImg_img_right_bottom:hover {
	transform: scale(1.2);
}
.carImg .imgContent .img_content_right .carImg_img_right_bottom {
	width: 100%;
}
.carImg .imgContent .img_content_right .carImg_img_right_bottom_P {
	padding: 12px 24px;
	background: #333333;
	font-size: 16px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #ffffff;
	line-height: 24px;
	box-sizing: border-box;
	position: relative;
	width: 339px;
	height: 48px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	position: relative;
	z-index: 1;
}
</style>
